<template>
  <view class="scenario-grid">
    <view
      v-for="(item, index) in scenarioData"
      :key="index"
      class="scenario-grid-item"
      @click="handleItemClick(item)"
    >
      <view class="scenario-category">
        <view class="category-line" :style="{ background: item.color }"></view>
        <text class="category-name">{{ item.name }}</text>
      </view>
      <view class="scenario-stats">
        <text class="stat-number">{{ item.count }}</text>
        <text class="stat-unit">件</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from "vue";
//api
import {
  cdjyApi,
  ljblApi,
  ljtmyApi,
  xfzdApi,
  zdjyApi,
  wztcApi,
  rymjApi,
  nljsApi,
  gkhzApi,
} from "@/api/index.js";
// 定义组件接收的属性
const props = defineProps({
  type: {
    type: String,
    default: () => "",
  },
  date: {
    type: String,
    default: () => "日",
  },
});

// 场景分类数据
const scenarioData = ref([
  { name: "事件总数", key: "事件总数", count: 45.2, color: "#4CAF50" },
  { name: "受理数", key: "受理总数", count: 28.7, color: "#2196F3" },
  { name: "未受理数", key: "不受理", count: 62.1, color: "#FF9800" },
  {
    name: "未处理",
    key: "未处理",
    count: 33.6,
    color: "#9C27B0",
    type: "立案派遣",
    type2: "待受理",
  },
  {
    name: "处理中",
    key: "处理中",
    count: 15.3,
    color: "#F44336",
    type: "处理中",
    type2: "结案核查",
  },
  {
    name: "处置完毕",
    key: "处置完毕",
    count: 21.9,
    color: "#00BCD4",
    type: "结案",
    type2: "",
  },
]);

//获取处置数据
const getDisposal = async () => {
  let res = {};
  if (props.type === "storefront_business") {
    //-出店经营
    res = await cdjyApi.getDisposalData(props.date);
  } else if (props.type === "garbage_exposure") {
    //-垃圾暴露
    res = await ljblApi.getDisposalData(props.date);
  } else if (props.type === "bin_overflow") {
    //-垃圾桶满溢
    res = await ljtmyApi.getDisposalData(props.date);
  } else if (props.type === "street_occupation") {
    //-占道经营
    res = await zdjyApi.getDisposalData(props.date);
  } else if (props.type === "fire_road_block") {
    //-消防占道
    res = await xfzdApi.getDisposalData(props.date);
  } else if (props.type === "illegal_parking") {
    //-违章停车
    res = await wztcApi.getDisposalData(props.date);
  } else if (props.type === "crowd_density") {
    //-人员密集预警分析
    res = await rymjApi.getDisposalData(props.date);
  } else if (props.type === "waterlogging") {
    //-内涝积水
    res = await nljsApi.getDisposalData(props.date);
  } else if (props.type === "high_altitude_fire") {
    //-高空火灾
    res = await gkhzApi.getDisposalData(props.date);
  }
  if (res.data && res.data.length > 0) {
    const apiData = res.data[0];
    scenarioData.value.forEach((item) => {
      item.count = apiData[item.key] || 0;
    });
  }
};
watch(() => props.date, getDisposal, { immediate: true });
// 定义组件发出的事件
const emit = defineEmits(["item-click"]);

// 处理点击事件
const handleItemClick = (item) => {
  console.log(item);
  if (item.type) {
    emit("item-click", item);
  }
};
</script>

<style lang="scss" scoped>
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // 每行 3 个宫格
  gap: 20rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}

.scenario-grid-item {
  background: #fff;
  border: 1rpx solid #f0f0f0;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;

  &:active {
    background-color: #f8f9fa;
  }

  .scenario-category {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .category-line {
      width: 6rpx;
      height: 30rpx;
      margin-right: 16rpx;
      border-radius: 3rpx;
    }

    .category-name {
      font-size: 28rpx;
      color: #333;
    }
  }

  .scenario-stats {
    display: flex;
    align-items: baseline;

    .stat-number {
      font-size: 36rpx;
      font-weight: 600;
      color: #2196f3;
      margin-right: 8rpx;
    }

    .stat-unit {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>
